<%--
  Created by IntelliJ IDEA.
  User: ThinkPad
  Date: 2025/5/15
  Time: 8:46
  To change this template use File | Settings | File Templates.
--%>
<%@ page pageEncoding="UTF-8" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
    <title>Title</title>
    <script src="./js/jquery-3.7.1.js"></script>
</head>
<body>
<form id="addPetForm">
    <p>
        *昵称：<input type="text" name="petName">
    </p>
    <p>
        *品种：<select name="petBreed">
        <option value="">--请选择--</option>
        <c:forEach items="${breedList}" var="breed">
            <option value="${breed.value}">${breed.name}</option>
        </c:forEach>
    </select>
    </p>
    <p>
        *性别：
        <c:forEach items="${sexList}" var="sex" varStatus="vs">
            <input <c:if test="${vs.index==0}">checked</c:if> type="radio" name="petSex" value="${sex.value}">${sex.name}
        </c:forEach>
    </p>
    <p>
        *出生日期：
        <input type="text" name="birthday"> yyyy-MM-dd
    </p>
    <p>
        宠物描述：<textarea name="description"></textarea>
    </p>
    <p>
        <input type="button" value="提交" onclick="savePet()">
        <input type="reset" value="重置">
    </p>
</form>
<script>
    $(function () {
        //当昵称输入框失去焦点时对昵称进行校验（查重）
        let petNameElement = document.querySelector('input[name="petName"]')
        petNameElement.addEventListener('blur',function () {
            let petName = petNameElement.value.trim()
            $.ajax({
                url:"/petNameRepeatServlet",
                data:{
                    petName:petName
                },
                type:"post",
                dataType:"json",
                success:function (result) {
                    if(result.code == 200){
                        if(result.data == true){
                            alert('昵称已存在!')
                        }
                    }else{
                        alert(result.msg)
                    }
                }
            })
        })
    })
    //保存宠物
    function savePet() {
        //宠物昵称
        let petname = document.querySelector('input[name="petName"]').value.trim()
        //品种
        let petBreed = document.querySelector('select[name="petBreed"]').value
        //出生日期
        let birthday = document.querySelector('input[name="birthday"]').value.trim()
        //yyyy-MM-dd
        let reg = /^(\d{4})-(\d{2})-(\d{2})$/
        if(petname == ''){
            alert('昵称不能为空!')
        }else if(petBreed == ''){
            alert('品种不能为空!')
        }else if(!reg.test(birthday)){
            alert('出生日期必须是yyyy-MM-dd格式!')
        } else {
            //保存宠物信息
            // console.log($('#addPetForm').serialize())
            $.ajax({
                url:"/savePetServlet",
                data:$('#addPetForm').serialize(),
                type:"post",
                dataType:"json",
                success:function (result) {
                    if(result.code == 200){
                        alert('宠物添加成功!')
                        location.href = <%= request.getContextPath() %>'/index.jsp'
                    }else{
                        alert(result.msg)
                    }
                }
            })
        }
    }
</script>
</body>
</html>
